/*
 * @Author: yangzonglong
 * @Date: 2021-06-09 13:38:15
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-13 14:51:26
 * @Auditor:
 */
import React, { memo } from 'react';
import { Input, Checkbox } from 'antd';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
import { useDrag, DragSourceMonitor, useDrop } from 'react-dnd';
import Icon from './../../icon/Icon';
import styles from './style.module.scss';

const type = 'optionSettingItem';

const style: React.CSSProperties = {
  marginBottom: '.5rem',
  cursor: 'move',
};
interface ItemProps {
  originalIndex: number;
  id: string;
  type: string;
}

export interface LineProps extends Record<string, any> {
  label: string; value: string; key?: string; checked?: boolean
}
interface IProps {
  originalIndex: number;
  showDefault?: boolean;
  isDefaultAll?: boolean;
  editInModal?: (item: LineProps, originalIndex: number) => void;
  item: LineProps;
  remove(index: number): void;
  change(index: number, k: string, v: string | boolean, isClearOther?: boolean): void;
  move(draggedId: string, hoverId: string): void;
  showRemore?: boolean
}

const OptionSettingItem = ({ originalIndex, showDefault, isDefaultAll, editInModal, item, remove, change, move, showRemore = true }: IProps) => {
  const changeLabel = (e: React.BaseSyntheticEvent) => change(originalIndex, 'label', e.target.value);
  const changeValue = (e: React.BaseSyntheticEvent) => change(originalIndex, 'value', e.target.value);
  const changeChecked = (e: CheckboxChangeEvent) => change(originalIndex, 'checked', e.target.checked, isDefaultAll ? false : true);

  const [{ isDragging }, drag, dragPreview] = useDrag(
    {
      type,
      item: { type, originalIndex, id: item.key as string },

      collect: (moniter: DragSourceMonitor) => ({
        isDragging: moniter.isDragging(), // dragCollect.isDragging
      }),
    },
    []
  );

  const [, drop] = useDrop(
    () => ({
      accept: type,
      canDrop: () => false,
      hover: ({ id: draggedId }: ItemProps) => {
        if (draggedId !== item.key) {
          move(draggedId, item.key!);
        }
      },
    }),
    [move]
  );

  const opacity = isDragging ? 0 : 1;

  return (
    <li ref={(node) => dragPreview(drop(node))} style={{ ...style, opacity }}>
      <span ref={(node) => drag(node)} className={styles.move}>
        <Icon icon="&#xe671;" />
      </span>
      <Input value={item.label} onClick={() => editInModal && editInModal(item, originalIndex)} onChange={changeLabel} readOnly={!!editInModal} />
      <Input placeholder="value值" onClick={() => editInModal && editInModal(item, originalIndex)} value={item.value} readOnly={!!editInModal} onChange={changeValue} />
      {showDefault && <Checkbox className={styles.ml} checked={item.checked} onChange={changeChecked} />}
      {editInModal && <Icon onClick={() => editInModal(item, originalIndex)} className={styles.remove} icon="&#xe656;" />}
      {showRemore && <Icon onClick={() => remove(originalIndex)} className={styles.remove} icon="remove" />}
    </li>
  );
};

export default memo(OptionSettingItem);
